<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>chart</title>
    <style>
        html,
        body {
            overflow: visible;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<{script src="moo.js" app="desktop"}>
<{script src="coms/highcharts.js" app="desktop"}>
<body>
    <!-- 3. Add the container -->
    <div id="container" style="width: 100%; height: 250px; margin: 1em auto"></div>
    <script type="text/javascript">
        var chart;

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'line',
                marginRight: 130,
                marginBottom: 80
            },
            title: {
                text: ''
            },
            xAxis: {
                categories: <{ $categories }>,
                labels: {
                    rotation: -45,
                    align: 'right',
                    style: {
                        font: 'normal 10px Verdana, sans-serif'
                    }
                }

            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' + this.x
                        + ': ' + this.y + '';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'right',
                x: -10,
                y: 60,
                borderWidth: 0
            },
            series: <{ $data }>
            });
    </script>
</body>

</html>